<template>
  <div class="container">
    <el-row :gutter="20" class="email-container">
      <el-col :span="20">
        <el-form ref="emailForm">
          <el-form-item label="邮件内容">
            <el-input type="textarea" v-model="emailContent" placeholder="在此输入邮件内容"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4" class="recognize-button">
        <el-button type="primary" @click="handleRecognize">识别</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <el-form-item label="公司" prop="company">
            <el-input v-model="form.company"></el-input>
          </el-form-item>
          <el-form-item label="岗位名称" prop="jobTitle">
            <el-input v-model="form.jobTitle"></el-input>
          </el-form-item>
          <el-form-item label="官网链接">
            <el-input v-model="form.website"></el-input>
          </el-form-item>
          <el-form-item label="偏爱优先级">
            <el-select v-model="form.priority" placeholder="请选择">
              <el-option label="高" value="高"></el-option>
              <el-option label="中" value="中"></el-option>
              <el-option label="低" value="低"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="流程进展">
            <el-input v-model="form.progress"></el-input>
          </el-form-item>
          <el-form-item label="Base">
            <el-input v-model="form.base"></el-input>
          </el-form-item>
          <el-form-item label="规模">
            <el-input v-model="form.size"></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-input v-model="form.type"></el-input>
          </el-form-item>
          <el-form-item label="行业">
            <el-input v-model="form.industry"></el-input>
          </el-form-item>
          <el-form-item label="笔试开始时间">
            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" v-model="form.examTime" type="datetime" placeholder="选择日期和时间"></el-date-picker>
          </el-form-item>
          <el-form-item label="面试开始时间">
            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" v-model="form.interviewTime" type="datetime" placeholder="选择日期和时间"></el-date-picker>
          </el-form-item>
          <el-form-item label="面试轮次">
            <el-input v-model="form.interviewRounds"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="form.notes"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">提交</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
  
  <script>
  export default {
    data() {
      return {
        form: {
          company: '',
          jobTitle: '',
          website: '',
          priority: '',
          progress: '',
          base: '',
          size: '',
          type: '',
          industry: '',
          examTime: '',
          interviewTime: '',
          interviewRounds: '',
          notes: ''
        },
        emailContent: '',
        rules: {
          company: [
            { required: true, message: '公司名称为必填项', trigger: 'blur' }
          ],
          jobTitle: [
            { required: true, message: '岗位名称为必填项', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      handleSubmit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            // 提交数据到后端
            this.$request.post('/info/submit', this.form).then(response => {
              this.$message.success('提交成功');
            }).catch(error => {
              this.$message.error('提交失败');
            });
          } else {
            this.$message.error('请检查表单');
            return false;
          }
        });
      },
      handleReset() {
        this.$refs.form.resetFields();
      },
      handleRecognize() {
      // 调用后端API进行AI识别
      this.$request.post('/info/recognize', { content: this.emailContent })
        .then(response => {
          const data = response.data;
          // 填充识别结果到表单
          this.form.company = data.company;
          this.form.jobTitle = data.jobTitle;
          this.form.website = data.website;
          this.form.priority = data.priority;
          this.form.progress = data.progress;
          this.form.base = data.base;
          this.form.size = data.size;
          this.form.type = data.type;
          this.form.industry = data.industry;
          this.form.examTime = data.examTime;
          this.form.interviewTime = data.interviewTime;
          this.form.interviewRounds = data.interviewRounds;
          this.form.notes = data.notes;
        })
        .catch(error => {
          console.error('识别失败', error);
          this.$message.error('识别失败');
        });
      }
    }
  }
  </script>
  
  <style scoped>
.container {
  padding: 20px;
  background: #f5f5f5;
}

.email-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.recognize-button {
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-col {
  padding: 0;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.el-input,
.el-select,
.el-date-picker {
  width: 100%;
}
  </style>